<template>
  <div class="test-mind-container">
    <div class="btns-wrapper">
      <el-button type="primary" @click="clearHighlight">清除高亮</el-button>
      <el-select
        v-model="selectedType"
        placeholder="按类型高亮"
        clearable
        @change="highlightNodeByType"
        style="width: 200px; margin-left: 10px"
      >
        <el-option label="核心领域" value="核心领域"></el-option>
        <el-option label="数学基础" value="数学基础"></el-option>
        <el-option label="编程语言" value="编程语言"></el-option>
        <el-option label="具体技术/概念" value="具体技术/概念"></el-option>
        <el-option label="应用领域" value="应用领域"></el-option>
      </el-select>
      <el-select
        v-model="selectedLevel"
        placeholder="按层级展示"
        clearable
        @change="showByLevel"
        style="width: 200px; margin-left: 10px"
      >
        <el-option label="第1层" value="1"></el-option>
        <el-option label="第2层" value="2"></el-option>
        <el-option label="第3层" value="3"></el-option>
        <el-option label="全部展开" value="all"></el-option>
      </el-select>

      <el-button type="primary" @click="testAddNode">添加节点</el-button>
      <el-button type="primary" @click="testEditNode">编辑节点</el-button>
      <el-button type="primary" @click="testDelNode">删除节点</el-button>
    </div>
    <div class="test-mind">
      <Mind
        ref="mindMapRef"
        :mindMapData="mindData"
        :themeConfig="themeConfig"
        :isEdit="isEdit"
        :colorMode="colorMode"
        @node-context-menu-action="handleContextMenuAction"
      />
    </div>
  </div>
</template>

<script>
import Mind from "./Mind.vue";

export default {
  name: "MindTest",
  components: {
    Mind,
  },
  data() {
    return {
      mindData: {
        nodes: [
          { id: "cs_foundation", label: "计算机科学基础", type: "核心领域" },
          { id: "data_structures", label: "数据结构", type: "核心领域" },
          { id: "algorithms", label: "算法", type: "核心领域" },
          { id: "os", label: "操作系统", type: "核心领域" },

          { id: "computer_networks", label: "计算机网络", type: "核心领域" },
          { id: "tcp_ip", label: "TCP/IP协议", type: "具体技术/概念" },

          {
            id: "sorting_searching",
            label: "排序/查找算法",
            type: "具体技术/概念",
          },
          { id: "ai", label: "人工智能", type: "应用领域" },
        ],
        links: [
          { source: "cs_foundation", target: "data_structures", label: "包含" },
          { source: "cs_foundation", target: "algorithms", label: "包含" },
          { source: "cs_foundation", target: "os", label: "包含" },
          {
            source: "discrete_math",
            target: "data_structures",
            label: "是...的基础",
          },
          {
            source: "discrete_math",
            target: "algorithms",
            label: "是...的基础",
          },
          { source: "data_structures", target: "array_list", label: "包含" },
          { source: "data_structures", target: "tree_graph", label: "包含" },
          { source: "algorithms", target: "sorting_searching", label: "包含" },
          { source: "algorithms", target: "ai", label: "应用于" },
          { source: "os", target: "computer_networks", label: "是...的基础" },
          { source: "computer_networks", target: "tcp_ip", label: "包含" },
          { source: "databases", target: "sql", label: "使用" },
          { source: "databases", target: "web_dev", label: "应用于" },
          { source: "python", target: "data_structures", label: "用于实现" },
          { source: "python", target: "ai", label: "用于实现" },
          { source: "python", target: "web_dev", label: "用于实现" },
          { source: "c_plus_plus", target: "os", label: "用于实现" },
          { source: "java", target: "oop", label: "是...的范例" },
          { source: "java", target: "web_dev", label: "用于实现" },
          {
            source: "oop",
            target: "software_engineering",
            label: "是...的基础",
          },
        ],
      },
      themeConfig: {
        // 层级样式配置（colorMode="level" 时生效）
        root: {
          fillColor: "#e53e3e",
        },
        second: {
          fillColor: "#38a169",
        },
        node: {
          fillColor: "#3182ce",
        },
        // 类型样式配置（colorMode="type" 时生效）
        typeColors: {
          核心领域: {
            fillColor: "#ff6600",
          },
          数学基础: {
            fillColor: "blue",
          },
          编程语言: {
            fillColor: "green",
          },
          "具体技术/概念": {
            fillColor: "#333",
          },
          应用领域: {
            fillColor: "#999",
          },
          测试类型: {
            fillColor: "#eee",
          },
          已编辑类型: {
            fillColor: "red",
          },
        },
      },
      isEdit: true,
      selectedType: "",
      selectedLevel: "",
      colorMode: "type", // 默认按类型控制颜色
    };
  },
  methods: {
    // 右键菜单事件处理函数
    handleContextMenuAction(eventData) {
      console.log("🎯 收到右键菜单操作事件:", eventData);
    },

    clearHighlight() {
      if (this.$refs.mindMapRef) {
        this.$refs.mindMapRef.clearHighlight();
      }
      // 清空选择
      this.selectedType = "";
      this.selectedLevel = "";
    },

    highlightNodeByType(type) {
      if (type && this.$refs.mindMapRef) {
        this.$refs.mindMapRef.highlightNodeByType(type);
      } else if (!type) {
        // 如果清空选择，则清除高亮
        this.clearHighlight();
      }
    },

    showByLevel(level) {
      if (level && this.$refs.mindMapRef) {
        this.$refs.mindMapRef.showByLevel(level);
      }
    },

    testAddNode() {
      if (this.$refs.mindMapRef) {
        const parentIdNodeId = "data_structures";
        const addNodeData = {
          id: "add_node_test_1",
          label: "测试节点",
          type: "具体技术/概念",
          description: "这是一个测试节点",
        };

        this.mindData.nodes.push(addNodeData);
        this.mindData.links.push({
          source: "data_structures",
          target: "add_node_test_1",
        });
        // 添加节点：
        // const success = this.$refs.mindMapRef.addNode(
        //   addNodeData,
        //   parentIdNodeId
        // );

        // if (success) {
        //   this.$message.success(`已添加节点: 测试节点`);
        // } else {
        //   this.$message.error("添加节点失败");
        // }
      }
    },

    testEditNode() {
      if (this.$refs.mindMapRef) {
        const editNodeId = "data_structures";
        // 编辑节点：被编辑节点的id，节点的新数据
        const success = this.$refs.mindMapRef.editNode(editNodeId, {
          label: "数据结构 (已编辑)",
          type: "已编辑类型",
        });

        if (success) {
          this.$message.success(`已编辑节点: 数据结构`);
        } else {
          this.$message.error("编辑节点失败");
        }
      }
    },
    testDelNode() {
      const delNodeId = "data_structures";
      // 删除节点：被删除节点的id，是否删除子节点
      const success = this.$refs.mindMapRef.removeNode(delNodeId, false);

      if (success) {
        this.$message.success(`已删除节点`);
      } else {
        this.$message.error("删除节点失败");
      }
    },
  },
};
</script>
<style scoped lang="scss">
.test-mind-container {
  height: 100%;
  width: 100%;
}
.btns-wrapper {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}
.test-mind {
  height: calc(100% - 50px);
}
</style>
